<template>
	<div id="communityList" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{ path: '/communityList' }">园区管理</el-breadcrumb-item>
						<el-breadcrumb-item>园区</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span">园区名称:</span>
							<el-input size="medium" v-model="village_name" placeholder="请输入园区名称" style="width: 160px;"></el-input>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="searchFun()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 搜索更多 -->
				<div>
					<div class="same-search-left new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span">园区类型:</span>
							<el-select size="medium" v-model="village_type" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in stateList" :key="item.stateId" :label="item.stateName" :value="item.stateId">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">水卡备案检查:</span>
							<el-select size="medium" v-model="check_record_card" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in sellList" :key="item.stateId" :label="item.stateName" :value="item.stateId">
								</el-option>
							</el-select>
						</div>
						<!-- <div class="same-left-one">
							<span class="same-search-span">充值模板状态:</span>
							<el-select size="medium" v-model="template_status" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in stateList" :key="item.stateId" :label="item.stateName" :value="item.stateId"></el-option>
							</el-select>
						</div>
						<div class="same-left-one">
							<span  class="same-search-span">打水模板状态:</span>
							<el-select size="medium"  v-model="sell_water_status" placeholder="请选择" style="width: 140px;">
								<el-option  v-for="item in sellList" :key="item.stateId" :label="item.stateName" :value="item.stateId"></el-option>
							</el-select>
						</div> -->
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="searchFun()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
			</div>
		</div>

		<div class="same-table-box">
			<div class="tabel_header">
				<h4 class="same-title-box">园区
					<div class="same-search-total"></div>
				</h4>
				<div class="same-left-one">
					<el-popover ref="popover" placement="top-start" title="标题" width="200" trigger="hover">
						<el-row>
							<el-col :span="10">

							</el-col>
						</el-row>
					</el-popover>
					<el-button type="primary" size="mini" @click="addCommunity()" icon="el-icon-circle-plus">添加园区</el-button>
				</div>
			</div>
			<div class="common-table-outer">
				<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
					:data="tableData" stripe>
					<el-table-column header-align="center"  width="50" align="center" label="序号">
						<template slot-scope="scope">
							{{scope.$index+1+(pageNo-1)*pageSize}}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="village_name" show-overflow-tooltip label="园区名称">
					</el-table-column>
					<el-table-column width="120" align="center" prop="village_type" label="园区类型">
					</el-table-column>
					<el-table-column align="center" label="所选打水模板">
						<template slot-scope="scope">
							<div v-if="scope.row.sell_water_delete == 2">
								<p>{{ scope.row.sell_water_title }}</p>
								<span class="ltte-hint"
									v-if="scope.row.sell_water_type == 1 && scope.row.sell_overdue">{{ scope.row.sell_start_time.slice(0, 10) }}—{{ scope.row.sell_end_time.slice(0, 10) }}</span>
								<span class="ltte-hint"
									v-else-if="scope.row.sell_water_type == 1 && !scope.row.sell_overdue">{{ scope.row.sell_start_time.slice(0, 10) }}—{{ scope.row.sell_end_time.slice(0, 10) }}</span>
								<span class="ltte-hint" v-else-if="scope.row.sell_water_type == 2">永久使用</span>
								<span class="ltte-hint" v-else>——</span>
							</div>
							<span v-else>通用</span>
						</template>
					</el-table-column>
					<el-table-column align="center" width="220" label="所选充值模板">
						<template slot-scope="scope">
							<div v-if="scope.row.is_delete == 2">
								{{ scope.row.template_title }}
								<br>
								<span class="ltte-hint" style="color: red"
									v-if="scope.row.template_type == 1 && scope.row.overdue">{{ scope.row.start_time.slice(0, 10) }}—{{ scope.row.end_time.slice(0, 10) }}</span>
								<span class="ltte-hint"
									v-else-if="scope.row.template_type == 1 && !scope.row.overdue">{{ scope.row.start_time.slice(0, 10) }}—{{ scope.row.end_time.slice(0, 10) }}</span>
								<span class="ltte-hint" v-else-if="scope.row.template_type == 2">永久使用</span>
								<span class="ltte-hint" v-else>——</span>
							</div>
							<span v-else>通用</span>
						</template>
					</el-table-column>
					<el-table-column align="center" width="180" label="水卡备案检查">
						<template slot-scope="scope">
							<div v-if="scope.row.check_record_card == 1">
								<span style="color:#2C5586">已开启</span><br>
								{{ scope.row.check_record_card_time }}
							</div>
							<span v-else>未开启</span>
						</template>
					</el-table-column>
					<el-table-column align="center" show-overflow-tooltip prop="address" label="园区地址">
					</el-table-column>
					<el-table-column width="260" align="center" label="操作">
						<template slot-scope="scope">
							<div class="village-list-btn-groups">
								<el-link class="custom-link" @click="edit(scope.row.id)">编辑</el-link>
								<el-link class="custom-link" @click="management(scope.row.id)">经营设置</el-link>
								<el-link class="custom-link" @click="detail(scope.row.id)">详情</el-link>
								<el-link class="custom-link" @click="del(scope.row.id)">删除</el-link>
							</div>
						</template>
					</el-table-column>

					<template slot="empty" v-if="isLoad">
						<div class="new-no-data-show">
							<img src="../../assets/images/no-data.png" alt="">
							<div>暂无相关数据</div>
						</div>
					</template>
				</el-table>
				<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">

					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
						layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'communityList',
		data: function () {
			return {
				village_type: '',
				check_record_card: '',
				village_name: '', //园区名称
				stateList: [
					{
						stateId: 1,
						stateName: '小区'
					},
					{
						stateId: 2,
						stateName: '学校'
					},
					{
						stateId: 3,
						stateName: '商圈'
					},
					{
						stateId: 4,
						stateName: '公寓'
					}
				], //充值模板状态
				sellList: [
					{
						stateId: 1,
						stateName: '开启'
					},
					{
						stateId: 2,
						stateName: '关闭'
					}
				], //打水模板状态
				sell_water_status: '', //选择的状态
				template_status: '', //选择的状态
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,-----
				loading: false, //加载动画
				isLoad: false,
				userAgent: '',

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
			};
		},
		// 初始化执行
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
			this.userAgent = userAgent;
			var that = this;
			var page = that.pageNo; // 当前页
			var pageSize = that.pageSize; // 每页条数
			that.communityList(page, pageSize); // 获取园区列表数据
		},
		inject: [
			'reload'
		],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//重置搜索
			reset() {
				this.village_name = '';
				this.sell_water_status = '';
				this.template_status = '';
				this.pageNo = 1;
				this.communityList();
			},

			communityList(page, pageSize) {
				var that = this;
				that.loading = true; //打开loading动画
				that.isLoad = false; //是否加载
				// Ajax请求
				that.$post({
					url: 'Partner/Village/VillageList',
					data: {
						check_record_card: that.check_record_card,
						village_type: that.village_type,
						village_name: that.village_name,
						row: that.pageSize,
						page: that.pageNo,
						sell_water_status: that.sell_water_status,
						template_status: that.template_status
					},
					success: data => {
						that.loading = false; //打开loading动画
						that.isLoad = true; //是否加载
						//console.log(data);
						if (data.code == 1000) {
							//that.$message.success(data.message);
							that.tableData = data.data.data;
							that.totalDataNumber = data.data.page.total_number;
							that.pageNo = data.data.page.current_page;
						} else {
							that.$message.error(data.message);
						}
					}
				});
			},
			// 每页
			handleSizeChange(val) {
				var that = this;
				that.pageNo = 1;
				that.pageSize = val; // 当前每页显示条数
				that.communityList(that.pageNo, val); // 获取设备列表数据
			},
			// 分页
			handleCurrentChange(val) {
				var that = this;
				var pageSize = that.pageSize; // 每页条数
				that.pageNo = val;
				that.communityList(val, pageSize); // 获取设备列表数据 
			},
			//编辑
			edit(id) {
				this.$router.push({ path: '/communityEdit', query: { id: id } });
			},
			//详情
			detail(id) {
				this.$router.push({ path: '/communityDetail', query: { id: id } });
			},
			management: function (id) {
				this.$router.push({ path: '/management', query: { id: id } });
			},
			//删除
			del(id) {
				var that = this;
				this.$confirm('确认删除吗?', '提示', { type: 'warning', center: true }).then(() => {
					// Ajax请求
					that.$post({
						url: 'Partner/Village/deleteVillage',
						data: {
							id: id
						},
						success: data => {
							if (data.code == 1000) {
								//成功后更新列表，且在当前页和当前每页条数
								that.communityList(that.pageNo, that.pageSize);
							} else {
								that.$message.error(data.message);
							}
						}
					});
				}).catch(() => {

				});

			},
			//添加园区
			addCommunity() {
				this.$router.push({ path: '/communityAdd' });
			},
			//搜索园区 
			searchFun() {
				var that = this;
				var page = that.pageNo; // 当前页
				var pageSize = that.pageSize; // 每页条数
				that.communityList(page, pageSize); // 获取园区列表数据
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化 
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		},
		activated() {
			if (this.$route.meta.isUpdate) {
				this.tableData = [];
				this.communityList()
				this.$route.meta.isUpdate = false;
			}
		},

		beforeRouteEnter(to, from, next) {
			let updates = ["/communityAdd", "/communityEdit", "/management"]
			if (updates.includes(from.path)) {
				to.meta.isUpdate = true;
			}
			next();
		},
		beforeRouteLeave(to, from, next) {
			let updates = ["/communityAdd", "/communityEdit", "/management", "/communityDetail"];
			if (!updates.includes(to.path)) {
				from.meta.keepAlive = false; 
			} else {
				from.meta.keepAlive = true;
			}
			next();
		}

	};
</script>

<style>
	#communityList {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}

	#communityList .ltte-hint {
		font-size: 12px;
		font-weight: 400;
		color: #808080;
	}

	#communityList .address-show {
		font-size: 12px;
		font-weight: 400;
		color: #343434;
		line-height: 20px;
	}
</style>
<style scoped>
 	.tabel_header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.village-list-btn-groups button:nth-of-type(3) {
		margin-left: 0;
		margin-top: 10px;
	}
</style>